<!--列表数据编辑页面-->
<script src="../../main.js"></script>
<template>
    <div class="fromArea">
        <!--        <fromheader></fromheader>-->

        <div class="main" style="margin-top: 102px;">
            <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="标题：">
                    <el-input placeholder="请输入标题" v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="起止时间：">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @change="selectDate"
                            style="width:100%"
                            v-model="form.daterange"
                            type="daterange"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="目标描述：">
                    <el-input placeholder="请输入你的阶段性工作目标" type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="衡量标准：">
                    <el-input placeholder="请输入衡量标准" type="textarea" v-model="form.metrics"></el-input>
                </el-form-item>
                <el-form-item label="客户：">
                    <el-input aria-placeholder="请描述你服务的客户，内部客户直接@姓名/工号" v-model="form.customer"></el-input>
                </el-form-item>
                <el-form-item label="邀评人：">
                    <el-input placeholder="请直接@姓名/工号，最多可邀请5人" v-model="form.judges"></el-input>
                </el-form-item>
                <el-form-item label="权重：">
                    <el-input-number v-model="form.weights"
                                     style="width: 100px;"
                                     controls-position="right"
                                     @change="handleChangeNumber" :min="1" :max="10000">
                    </el-input-number>
                    %
                </el-form-item>

                <el-form-item label="目标公开：">
                    <el-radio-group v-model="form.publicState">
                        <el-radio label="公开"></el-radio>
                        <el-radio label="部分公开"></el-radio>
                        <el-radio label="不公开"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.publicState==='部分公开'">
                    <el-input placeholder="请输入内容" v-model="form.publicContent"></el-input>
                </el-form-item>
                <el-form-item>
                    <span style="color: #888e8e">客户、邀评人默认被分享</span>
                </el-form-item>

                <el-form-item>
                    <el-button @click="submit" type="primary">提交修改</el-button>
                    <el-button>保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    // import cookiesTools from "../../utils/cookiesTools"

    export default {
        name: "index",
        components: {
            // fromheader,

        },

        data() {
            return {

                name:"",

                form: {
                    daterange: [],//时间段数组   定义一个名称为“daterange”的数组
                    title: "",//标题   定义一个名称为“title”的字符串
                    desc: "",//目标描述  定义一个名称为“desc”的字符串
                    startDate: "",//开始时间
                    endDate: "",//结束时间
                    metrics: "",//衡量标准
                    customer: "",//客户
                    judges: "",//邀评人
                    weights: 0,//权重
                    publicState: "公开",//公开状态
                    publicContent: "",//公开内容
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    resource: [
                        {required: true, message: '请选择活动资源', trigger: 'change'}
                    ],
                    desc: [
                        {required: true, message: '请填写活动形式', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
        },

        /*函数体*/
        methods: {

            /*时间选择回调*/
            selectDate(obj) {
                this.form.startDate = obj[0]
                this.form.endDate = obj[1]

                console.log("obj", obj)
            },


            /*todo 2 提交修改*/
            submit() {
                //思路

                //1.获取cookies 中的tableData数组
                let tableData2 = JSON.parse(this.cookie.getCookies("tableData"))
                //2.使用迭代器，循环tableData数组，判断标题是否等于路由参数中的标题
                for (let i = 0; i < tableData2.length; i++) {
                    if (tableData2[i].title === this.$route.params.title) {
                        tableData2[i] = this.form
                    }
                }
                this.cookie.setCookies("tableData", JSON.stringify(tableData2))

                this.$router.go(-1)
                //3.如果等于，就把表单中的数据，覆盖掉当前循环到的item对象

                //4.覆盖掉对象后，在迭代器外面，把tableData覆盖掉cookies中的tableData

            },


            /*todo 1 数据回显处理函数*/
            showData() {
                //思路

                //1.获取cookies 中的tableData数组
                let tableData2 = JSON.parse(this.cookie.getCookies("tableData"))
                //2.使用迭代器，循环tableData数组，判断标题是否等于路由参数中的标题
                for (let i = 0; i < tableData2.length; i++) {
                    if (tableData2[i].title === this.$route.params.title) {
                        this.form = tableData2[i]

                        //vue内置的$set()函数，是响应式的，用于代替“=”。因为“=”是js的赋值语法，在vue中有些情况下，不能实时刷新。
                        // this.$set("对象","字段","值")
                        this.$set(this,"name","zhangsan")
                        this.$set(this.form,"daterange", [tableData2[i].startDate, tableData2[i].endDate])
                        // this.form['daterange'] = [tableData2[i].startDate, tableData2[i].endDate]


                        console.log("数据完整吗？：：", {...tableData2[i]})
                        console.log("this.form？：：", {...this.form})
                    }
                }
                //3.如果等于，就把当前循环到的item对象，覆盖掉表单中的数据

                //4.覆盖掉表单中的数据后，表单中就会自动回显数据，就可以方便编辑了


            },


            /*权重变动回调*/
            handleChangeNumber() {

            },
        },

        /*生命周期钩子函数：页面初始化成功后加载*/
        mounted() {
            console.log("跳过来了", this.$route.params.title)
            this.showData()
        },

        /*监听数据变化*/
        updated() {
            /*...  是对象展开符号*/
            // console.log("数据表单变化了：\n", {...this.form})
        }


    }
</script>

<style scoped>
    .fromArea {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        height: 75%;
        margin: 25px;
    }

    .fromArea .main {
        width: 600px;
        height: 700px;
        text-align: left;
    }
</style>
